<script lang="ts" setup>
  import { ClockCircleOutlined } from '@ant-design/icons-vue';
  import Timeline from '@sscd/timeline';
</script>

<template>
  <div class="demo">
    <div class="demo-title">右侧时间轴点</div>
    <div class="demo-content">
      <Timeline mode="right">
        <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
        <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
        <Timeline.Item>
          <template #dot><ClockCircleOutlined style="font-size: 16px" /></template>
          Technical testing 2015-09-01
        </Timeline.Item>
        <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
      </Timeline>
    </div>
  </div>
</template>
